<template>
  <div id="content">
    <!-- 地图 -->
    <div id="box-map" />
    <!-- 搜索框 -->
    <div id="contain-tool">
      <div id="contain-search">
        <!-- 输入框 -->
        <input class="input-search" placeholder="搜索站点位置..." :value="inputContent" maxlength="256" v-on:input="inputValue"/>
        <!-- 删除 -->
        <div class="input-clear" v-show="isHasInput" v-on:click="clearInput" />
        <!-- 搜索icon -->
        <img class="icon-search" src="../images/icon/search.png" v-on:click="searchTap" />
      </div>
      <div id="contain-result" v-if="poiList.length > 0">
        <div class="item-result" v-for="poi in poiList" v-on:click="poiTab(poi.position)" >
          <img class="icon-result" src="../images/icon/search_gray.png" />
          <div class="result-text">{{poi.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

const DRAW_MODE = {
  POINT: 0,
  CAR_PLACE: 1
};
export default {
  name: "CarPlace",
  data() {
    return {
      drawMode: -1,
      inputContent: "",
      pointMarkers: undefined,
      carPlaceMarkers: undefined,
      poiList: []
    };
  },

  methods: {

    /* ---------------------- 初始化 ---------------------- */
    initMap() {
      this.mapControl = new AMap.Map("box-map", {
        zoom: 5,
        center: [116.397428, 39.90923],
        viewMode: "3D"
      });
      this.mapControl.on("zoomchange", this.mapZoomChange);
      this.mapControl.on("complete", this.loadData);
    },

    mapZoomChange() {
      let zoom = this.mapControl.getZoom(); //获取当前地图级别
      zoom < 16 ? this.drawPoint() : this.drawCarPlace()
    },

    loadData() {
      /* 列表 */
      // // 点位置 -- 加载数据
      // this.pointMarkers = [
      //   {
      //     active: true,
      //     name: "骑",
      //     money: "5000",
      //     percent: "82",
      //     position: [116.205467, 39.907761]
      //   },
      //   {
      //     active: false,
      //     name: "阳",
      //     money: "500",
      //     percent: "60",
      //     position: [116.368904, 39.913423]
      //   },
      //   {
      //     active: true,
      //     name: "绵",
      //     money: "50",
      //     percent: "10",
      //     position: [116.305467, 39.807761]
      //   }
      // ];

      // // 车位置 -- 加载数据
      // this.carPlaceMarkers = [
      //   {
      //     icon:
      //       "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png",
      //     active: true,
      //     position: [116.205467, 39.907761]
      //   },
      //   {
      //     icon:
      //       "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png",
      //     active: false,
      //     position: [116.368904, 39.913423]
      //   },
      //   {
      //     icon:
      //       "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
      //     active: true,
      //     position: [116.305467, 39.807761]
      //   }
      // ];

      // // success callback
      // this.drawPoint();
      // this.mapControl.setFitView(); // param: [] 自适应markers
    },

    /* ---------------------- 输入框 ---------------------- */
    inputValue() {
      let value = document.querySelector(".input-search").value;
      if (value == undefined) return;
      this.inputContent = value;

      // InputContent 改变下拉框内容
      let result = [],
        markers = this.pointMarkers || [],
        len = markers.length;
      for (let i = 0; i < len; i++) {
        if (markers[i].name.indexOf(this.inputContent) != -1) {
          result.push(markers[i]);
        }
      }
      this.showPOI(result);
    },

    poiTab(position) {
      this.mapControl.setCenter(position); //设置地图中心点
      this.hidePOI();
    },

    searchTap() {
      let poiList = [];
      let markers = this.pointMarkers,
        len = markers ? markers.length : 0;
      for (let i = 0; i < len; i++) {
        if (markers[i].name.indexOf(this.inputContent) != -1) {
          poiList.push(markers[i]);
        }
      }
      if (poiList.length == 0) {
        this.showErrorPOI();
      } else {
        let poi = poiList[0];
        this.mapControl.setCenter(poi.position); //设置地图中心点
      }
      this.hidePOI();
    },

    clearInput() { this.inputContent = "" },

    /* ---------------------- 检索内容 ------------------ */
    showPOI(poiList) {
      this.poiList = poiList;
    },

    hidePOI() {
      this.poiList = [];
    },

    showErrorPOI() {
      // 显示错误POI
    },

    /* ---------------------- 数据 ---------------------- */
    // 绘制点
    drawPoint() {
      if (this.drawMode == DRAW_MODE.POINT) return;
      this.drawMode = DRAW_MODE.POINT;
      this.mapControl.clearMap(); // 清除地图覆盖物

      let markers = this.pointMarkers;
      markers.forEach(marker => {
        new AMap.Marker({
          map: this.mapControl,
          content: this.createItemPoint(marker), // 自定义点标记覆盖物内容
          position: marker.position,
          anchor: "bottom-center", // 设置锚点方位
          offset: new AMap.Pixel(0, 0) // 相对于基点的偏移位置
        });
      });
    },

    createItemPoint(marker) {
      if (!marker) return "";
      let active =
        "";
      let normal =
        "";
      return (
        "<div class='item-point'>" +
        "<div class='window-point'>" +
        `<span>实收: ${marker.money}元</span>` +
        `<span>占有率: ${marker.percent}%</span>` +
        "</div>" +
        "<div class='location-point'>" +
        `<img class='icon-location' src=${marker.active ? active : normal} />` +
        `<div class='location-name ${
          marker.active ? "name-active" : "name-normal"
        }'>${marker.name}</div>` +
        "</div>" +
        "</div>"
      );
    },

    // 绘制车位
    drawCarPlace() {
      if (this.drawMode == DRAW_MODE.CAR_PLACE) return;
      this.drawMode = DRAW_MODE.CAR_PLACE;
      this.mapControl.clearMap(); // 清除地图覆盖物

      let markers = this.carPlaceMarkers;
      markers.forEach(marker => {
        new AMap.Marker({
          map: this.mapControl,
          content: this.createItemCar(marker),
          position: marker.position,
          anchor: "bottom-center", // 设置锚点方位
          offset: new AMap.Pixel(0, 0)
        });
      });
    },

    createItemCar(marker) {
      let active =
        "";
      let normal =
        "";

      return (
        "<div>" +
        `<img class="${marker.active ? "item-car" : "item-empty"}" src=${
          marker.active ? active : normal
        }>` +
        "</div>"
      );
    },

    /* ------------------------ 地图缩放事件 ------------------------ */




    showHead(){  // 页面加载时隐藏显示头部
      this.$store.dispatch('showHead')
    }
  },

  computed: {
    isHasInput() { return this.inputContent ? true : false; }
  },

  /* ------------------- 生命周期 ------------------- */
  mounted() {
    this.initMap();
    this.showHead()
  },

  destroyed() {
    this.mapControl.off("zoomchange", this.mapZoomChange);
    this.mapControl.off("complete", this.loadData);
    this.mapControl.destroy();
  }
};
</script>
<style>
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: rgba(209, 209, 209, 1);
}

#content {width: 100%;height: 100%;position: relative;}
#box-map {position: relative;width: 100%;height: 100%;}
#contain-tool {position: absolute;top: 24px;left: 11px;}
/* contain-search */
#contain-search {width: 450px;height: 50px;background: #fff;border-radius: 4px;box-shadow: 0px 1px 10px 0px rgba(201, 201, 201, 1);display: flex;align-items: center;}
#contain-search .input-search {margin-left: 25px;flex: 1 1 auto;border: none;height: 100%;outline: none;font-size: 16px;color: #020202;}
#contain-search .input-clear {cursor: pointer;width: 27px;height: 38px;background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/searchbox_5c0d97d.png) no-repeat 0 -114px #fff;}
#contain-search .icon-search {width: 20px;height: 20px;margin-left: 10px;margin-right: 25px;cursor: pointer;}
/* item-result */
#contain-result {margin-top: 5px;background: #fff;border-radius: 4px;box-shadow: 0px 1px 10px 0px rgba(201, 201, 201, 1);}
.item-result {cursor: pointer;width: 100%;height: 35px;display: flex;align-items: center;}
.item-result:hover {background: #dedede;}
.item-result .icon-result {margin-left: 25px;width: 14px;height: 14px;}
.item-result .result-text {margin-left: 10px;}
/* item-point */
.item-point {display: flex;align-items: center;flex-direction: column;}
.item-point .window-point {padding: 5px 20px;background: rgba(255, 255, 255, 0.8);box-shadow: 0px 1px 10px 0px rgba(201, 201, 201, 1);border-radius: 20px;}
.item-point .window-point span {display: block;font-size: 14px;color: rgba(116, 116, 116, 1);line-height: 25px;text-align: center;white-space: nowrap;}
.item-point .location-point {position: relative;margin-top: 6px;}
.item-point .location-point .icon-location {width: 105px;height: 132px;}
.item-point .location-point .location-name {font-size: 37px;font-family: FZLTCHK--GBK1-0;position: absolute;top: 23px;left: 50%;transform: translateX(-50%);}
.item-point .location-point .name-normal {color: #909090;}
.item-point .location-point .name-active {color: rgba(244, 64, 58, 1);}
.item-car {width: 104px;height: 59px;}
.item-empty {width: 99px;height: 48px;}
</style>
